<template>
  <view class="poster-box">
    <u-image :src="prefixURL(invite.invite_poster)" width="100%" height="1162rpx"></u-image>
    <image :src="prefixURL(invite.invite_qrcode)" class="ewm" mode=""></image>
  </view>
  <view class="invite-code u-flex-y-center u-flex-between">
    <text>我的邀请码：{{invite.invite_code}}</text>
    <image src="@/static/images/01_13fg.png" mode=""></image>
  </view>
  <view class="down-btn" @click="downLoadImg">下载海报</view>
  <canvas canvas-id="myCanvas" id="myCanvas"></canvas>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import { invite_info } from '../../config/api';
  import { prefixURL } from '../../util/util';
  import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
  const invite = ref({})
  onShareAppMessage(() => {
    return {
      path: `/pages/index/index?code=${invite.value.invite_code}`
    }
  })
  onShareTimeline(() => {
    return {
      path: `/pages/index/index?code=${invite.value.invite_code}`
    }
  })
  onMounted(() => {
    _invite_info()
  })
  const downLoadImg = async () => {
    let context = uni.createCanvasContext('myCanvas')
    let phone = uni.getSystemInfoSync()
    const w = phone.windowWidth / 750
    // 背景图
    let image1 = await getImageInfo(prefixURL(invite.value.invite_poster))
    context.drawImage(image1.path, 0, 0, image1.width * w, image1.height * w)
    // 二维码
    let image2 = await getImageInfo(prefixURL(invite.value.invite_qrcode))
    context.drawImage(image2.path, 570 * w, 1000 * w, 146 * w, 146 * w)
    context.draw(false, (res) => {
      uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: result => {
          uni.saveImageToPhotosAlbum({
            filePath: result.tempFilePath,
            success: () => {
              uni.$u.toast('保存成功')
            },
            fail: () => {
              uni.$u.toast('保存失败')
            },
            complete: () => {
              uni.hideLoading()
            }
          })
        }
      })
    });
  }
  // 获取图片信息
  const getImageInfo = async (src) => {
    return new Promise((resolve, reject) => {
      uni.getImageInfo({
        src,
        success: (res) => {
          resolve(res)
        },
        fail: (err) => {
          console.log(err, src)
          reject(err)
        }
      })
    })
  }
  // 邀请信息
  const _invite_info = () => {
    invite_info().then(res => {
      console.log(res)
      invite.value = res.data
    })
  }
</script>

<style scoped lang="scss">
  .poster-box {
    padding: 0 20rpx;
    position: relative;

    .ewm {
      width: 146rpx;
      height: 146rpx;
      position: absolute;
      right: 32rpx;
      bottom: 32rpx;
    }
  }

  .invite-code {
    padding: 24rpx;
    height: 88rpx;
    background: #F1F1F1;
    border-radius: 20rpx;
    margin: 20rpx;

    image {
      width: 28rpx;
      height: 28rpx;
    }
  }

  .down-btn {
    height: 90rpx;
    background: #F87610;
    border-radius: 50rpx;
    color: #fff;
    font-size: 30rpx;
    font-weight: 500;
    margin: 0 30rpx;
    text-align: center;
    line-height: 90rpx;
  }

  canvas {
    width: 100%;
    height: 1162rpx;
    position: fixed;
    top: 999999px;
  }
</style>